<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="/pingzheng_js_css_img/jquery.min.js"></script>
<link href="/pingzheng_js_css_img/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="/pingzheng_js_css_img/common.css" rel="stylesheet" type="text/css">
<link href="/pingzheng_js_css_img/style.css" rel="stylesheet" type="text/css">
<script src="${ctx}/component/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function(){
		eventObj();
	});
	
	var i = 7;
	function vdadd(obj){
		var trobj = '<tr class="voucher-tr" data-id="'+(i++)+'"><td align="center" class="table-edge"></td><td data-type="brief"></td><td data-type="km" kmCode="" kmName=""></td><td data-type="money" class="v-money"></td><td class="v-money v-money2" data-type="money"></td></tr>';
		$(obj).parents(".voucher-tr").after(trobj);
		eventObj();
	}
	
	function eventObj(){
		$(".voucher-tr").off();
		$(".voucher-tr").hover(
			function () {
				$(this).find(".table-edge").empty();
				var ul = '<ul class="operatebtn"><li class="img-plus-sign vd-add" onclick="vdadd(this);"></li><li class="img-minus-sign vd-remove" onclick="vdremove(this)"></li></ul>'
		   		$(this).find(".table-edge").append(ul);
		  	},
		  	function () {
			  $(this).find(".table-edge").empty();
		  	}
		);
		$("tbody .v-money").off();
		$("tbody .v-money").click( function () {
			if($(this).find(".v-data").length && $(this).find(".v-data").length>0){
				var valuedate = $(this).find(".v-data").text()/100;
				var input = '<div class="text-auto-wrap"><input class="text-auto" onkeyup="num(this)" value="'+valuedate+'"></div>';
				$(this).empty();
				$(this).append(input);
				$(this).find(".text-auto").focus();
				
				$(this).find(".text-auto").blur( function () {
					var valuedate = $(this).val();
					var parenttd = $(this).parents(".v-money");
					if(valuedate==null || valuedate == ""){
						parenttd.empty();
					}else{
						var vstr; 
						if(String(valuedate).indexOf(".")>-1){
							if(String(valuedate).split(".")[1].length==1){
								vstr = String(valuedate).split(".")[0]+String(valuedate).split(".")[1]+"0";
							}else if(String(valuedate).split(".")[1].length==2){
								vstr = String(valuedate).split(".")[0]+String(valuedate).split(".")[1];
							}else if(String(valuedate).split(".")[1].length>2){
								vstr = String(valuedate).split(".")[0]+String(valuedate).split(".")[1].substring(0,2);
							}else{
								vstr = valuedate;
							}
						}else{
							vstr = valuedate+"00";
						}
						
						var data = '<div class="v-data">'+vstr+'</div>';
						parenttd.empty();
						parenttd.append(data);
					}
					//结算合计
					jieDaiMoney();
				} );
				
			}else{
				if($(this).find(".text-auto").length && $(this).find(".text-auto").length>0){
					$(this).find(".text-auto").focus();
				}else{
					var input = '<div class="text-auto-wrap"><input class="text-auto" onkeyup="num(this)" value=""></div>';
					$(this).empty();
					$(this).append(input);
					$(this).find(".text-auto").focus();
					
					$(this).find(".text-auto").blur( function () {
						var valuedate = $(this).val();
						var parenttd = $(this).parents(".v-money");
						if(valuedate==null || valuedate == ""){
							parenttd.empty();
						}else{
							var vstr; 
							if(String(valuedate).indexOf(".")>-1){
								if(String(valuedate).split(".")[1].length==1){
									vstr = String(valuedate).split(".")[0]+String(valuedate).split(".")[1]+"0";
								}else if(String(valuedate).split(".")[1].length==2){
									vstr = String(valuedate).split(".")[0]+String(valuedate).split(".")[1];
								}else if(String(valuedate).split(".")[1].length>2){
									vstr = String(valuedate).split(".")[0]+String(valuedate).split(".")[1].substring(0,2);
								}else{
									vstr = valuedate;
								}
							}else{
								vstr = valuedate+"00";
							}
							
							var data = '<div class="v-data">'+vstr+'</div>';
							parenttd.empty();
							parenttd.append(data);
						}
						//结算合计
						jieDaiMoney();
					});
				}
			}
		});
		
		$("td[data-type='brief']").off();
		$("td[data-type='brief']").click( function () {
			$(this).addClass("v-edit");
			if($(this).text()!="" && $(this).text()!=null){
				var valuedate = $(this).text();
				var input = '<div class="text-auto-wrap"><input class="text-auto" value="'+valuedate+'"></div>';
				$(this).empty();
				$(this).append(input);
				$(this).find(".text-auto").focus();
				
				$(this).find(".text-auto").blur( function () {
					var valuedate = $.trim($(this).val());
					var parenttd = $(this).parents("td[data-type='brief']");
					if(valuedate==null || valuedate == ""){
						parenttd.empty();
					}else{
						parenttd.empty();
						parenttd.text(valuedate);
					}
					parenttd.removeClass("v-edit");
				} );
				
			}else{
				if($(this).find(".text-auto").length && $(this).find(".text-auto").length>0){
					$(this).find(".text-auto").focus();
				}else{
					var input = '<div class="text-auto-wrap"><input class="text-auto" value=""></div>';
					$(this).empty();
					$(this).append(input);
					$(this).find(".text-auto").focus();
					
					$(this).find(".text-auto").blur( function () {
						var valuedate = $.trim($(this).val());
						var parenttd = $(this).parents("td[data-type='brief']");
						if(valuedate==null || valuedate == ""){
							parenttd.empty();
						}else{
							parenttd.empty();
							parenttd.text(valuedate);
						}
						parenttd.removeClass("v-edit");
					});
				}
			}
		});
		
		$("td[data-type='km']").off();
		$("td[data-type='km']").click( function () {
			$(this).addClass("v-edit");
			if($(this).text()!="" && $(this).text()!=null){
				var valuedate = $(this).text();
				km_f($(this),valuedate);
			}else{
				if($(this).find(".text-auto").length && $(this).find(".text-auto").length>0){
					$(this).find(".text-auto").focus();
				}else{
					km_f($(this),"");
				}
			}
			//添加科目选者框
			initselect($(this));
		});
		
	}
	
	function km_f(thisobj,valuedate){
		var input = '<div class="text-auto-wrap"><input class="text-auto" onkeyup="findKm(this)" value="'+valuedate+'"></div>';
		thisobj.empty();
		thisobj.append(input);
		thisobj.find(".text-auto").focus();
		
		thisobj.find(".text-auto").blur( function () {
			var valuedate = $.trim($(this).val());
			var parenttd = $(this).parents("td[data-type='km']");
			
			var parenttdValue = parenttd.attr("kmCode")+" "+parenttd.attr("kmName");
			if(valuedate==null || valuedate == "" || valuedate!=parenttdValue){
				parenttd.empty();
				parenttd.attr("kmCode","");
				parenttd.attr("kmName","");
			}else{
				parenttd.empty();
				parenttd.text(valuedate);
			}
			parenttd.removeClass("v-edit");
			$(".div-ui").hide();
			
		} );
	}
	
	function findKm(obj){
		var parenttd = $(obj).parents("td[data-type='km']");
		initselect(parenttd);
	}
	
	function initselect(clickObj){
		var div = '';
		$.post("${ctx}/dickm/getDickmByLikeCodeOrName", {dicCodeOrName : $.trim(clickObj.find(".text-auto").val())}, function(result) {
			if(result!=null && result!=undefined){
				$.each( $(result), function(i, obj){
					div+='<div class="div-li" kmCode="'+obj.dicCode+'" kmName="'+obj.fullName+'" >'+obj.dicCode+' '+obj.fullName+'</div>';
				});
				
				$(".div-ui").show();
				
				$(".div-ui").empty();
				$(".div-ui").append(div);
				$(".div-ui").width(clickObj.innerWidth()-2); 
				$(".div-ui").offset({ top: clickObj.offset().top+clickObj.innerHeight()});
				$(".div-ui").offset({ left: clickObj.offset().left});
				
				$(".div-li").hover(
					function () {
				   		$(this).addClass("hover");
				  	},
				  	function () {
					  $(this).removeClass("hover");
				  	}
				);
				
				$(".div-li").on("mousedown", function(){
					
				  clickObj.text($(this).text());
				  clickObj.attr("kmCode",$(this).attr("kmCode"));
				  clickObj.attr("kmName",$(this).attr("kmName"));
				  
				  clickObj.removeClass("v-edit");
				  $(".div-ui").hide();
				});
				
			}
		}, "json");
	}
	
	
	function jieDaiMoney(){
		var jieMoney=0;
		var daiMoney=0;
		$.each($("tbody .v-money"), function(i, obj){
			if($(obj).hasClass("v-money2")){
				if($(obj).text()!="" && $(obj).text() !=null){
					daiMoney+=parseFloat($(obj).text());
				}
			}else{
				if($(obj).text()!="" && $(obj).text() !=null){
					jieMoney+=parseFloat($(obj).text());
				}
			}
		});
		
		if(jieMoney==daiMoney){
			$("#hejizw").text(intToChinese(jieMoney));
			$("#hja").css("color","");
			
			var hj = jieMoney;
			if(jieMoney==0){
				hj = '000';
			}
			
			$("tfoot .v-money").html('<div class="v-data">'+hj+'</div>');
			$("tfoot .v-money").css("color","#39f");
			return true;
		}else{
			$("#hejizw").text("不平");
			$("#hja").css("color","#f33");
			
			$("tfoot .v-money").html('<div class="v-data">000</div>');
			$("tfoot .v-money").css("color","#f33");
			return false;
		}
	}
	
	function vdremove(obj){
		if($(".voucher-tr").length>2){
			$(obj).parents(".voucher-tr").remove();
		}else{
			alert("至少保留两条分录！");
		}
		//结算合计
		jieDaiMoney();
	}
	
	function num(obj){
		obj.value = obj.value.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符
		obj.value = obj.value.replace(/^\./g,""); //验证第一个字符是数字
		obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个, 清除多余的
		obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
		obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //只能输入两个小数
		if(obj.value.indexOf(".")>-1){
			if(obj.value.split(".")[0].length>9){
				obj.value=obj.value.substring(0,9)+obj.value.split(".")[1];
			}
			if(obj.value.split(".")[0].length>1 && parseInt(obj.value.split(".")[0].substring(0,1))==0){
				obj.value=obj.value.substring(1,obj.value.length);
			}
		}else{
			if(obj.value.length>9){
				obj.value=obj.value.substring(0,9);
			}
			if(obj.value.length>1 && parseInt(obj.value.substring(0,1))==0){
				obj.value=obj.value.substring(1,obj.value.length);
			}
		} 
		
		//清空借、贷金额  借贷只能填写一个
		var parenttd = $(obj).parents(".v-money");
		parenttd.siblings(".v-money").empty();
	}
	
	function intToChinese(n) {
		n += '';
        if (!/^(-?[0-9]\d*)$/.test(n))
            return "——";
        if (n * 1 == 0) {
            return '零元整';
        }
        var fu = "";
        if (n * 1 < 0) {
            fu = "负";
            n = n.substring(1);
        }
        var unit = "仟佰拾亿仟佰拾万仟佰拾元角分",
            str = "";
        unit = unit.substr(unit.length - n.length);
        for (var i = 0; i < n.length; i++)
            str += '零壹贰叁肆伍陆柒捌玖'.charAt(n.charAt(i)) + unit.charAt(i);
        var str1 = str.replace(/零(仟|佰|拾|角)/g, "零").replace(/(零)+/g, "零").replace(/零(万|亿|元)/g, "$1").replace(/(亿)万|壹(拾)/g, "$1$2").replace(/^元零?|零分/g, "").replace(/元$/g, "元整");
        return fu + str1;
	}
	
</script>

<script type="text/javascript">
	$(function(){
		
		$(".bluetbn-btn").click( function () {
			toadd(true);
		});
		
		$(".saveVoucher2").click( function () {
			toadd(false);
		});
		
		//初始化凭证号
		getMaxPzh($("#voucherDate"));
		
	});
	
	function toadd(isbool){
		
		if(!jieDaiMoney()){
			alert("账目不平！");
			return;
		}
		
		if($.trim($("#vouchersNumber").val())==""){
			alert("凭证号不能为空！");
			return;
		}
		
		if($.trim($("#voucherDate").val())==""){
			alert("凭证日期不能为空！");
			return;
		}
		
		var pinjiecanshu = "";
		var bool = false;
		var msg = "";
		var tdObj;
		//校验是否存在未填项
		$.each($(".voucher-tr"), function(i, tr){
			
			var tds = $(tr).find("td");
			
			var zy = $.trim($(tds[1]).text());//摘要
			var kudm = $.trim($(tds[2]).attr("kmCode"));//会计科目代码
			var kumc = $.trim($(tds[2]).attr("kmName"));//会计科目名称
			var jfje = $.trim($(tds[3]).text());//借方金额 
			var dfje = $.trim($(tds[4]).text());//贷方金额
			
			if(zy=="" && kudm=="" && jfje=="" && dfje==""){
				return;
			}
			
			if(zy==""){
				msg = "请填写摘要！";
				tdObj = $(tds[1]);
				bool = true;
				return false;
			}
			if(kudm==""){
				msg = "请选择科目！";
				tdObj = $(tds[2]);
				bool = true;
				return false;
			}
			if(jfje=="" && dfje==""){
				msg = "请填写金额！";
				tdObj = $(tds[3]);
				bool = true;
				return false;
			}else if(jfje!="" && dfje!=""){
				msg = "不能同时填写借贷金额！";
				tdObj = $(tds[3]);
				bool = true;
				return false;
			}
			
			//借贷金额标识
			var biaoshi = "";
			var biaoShiJinE;
			
			if(jfje!=""){
				biaoshi = "jfje";
				biaoShiJinE = jfje;//金额单位（分）
			}else{
				biaoshi = "dfje";
				biaoShiJinE = dfje;//金额单位（分）
			}
			
			//数据拼装
			pinjiecanshu+=(zy+"="+kudm+"="+kumc+"="+biaoshi+"="+biaoShiJinE+",");//顺次是:摘要+科目代码+科目名称+借贷金额标识+借贷金额（分）
			
		});
		
		if(bool){
			alert(msg);
			tdObj.click();
			return false;
		}
		
		//刷新凭证号
		getMaxPzh($("#voucherDate"));
		
		$.post("${ctx}/pingZheng/add", {
			
			pzz:$("#pzz").val(),
			pzh:$("#vouchersNumber").val(),
			pzDate:$("#voucherDate").val(),
			pinjiecanshu:pinjiecanshu
			
		}, function(result) {
			if ("succ" == result) {
				alert("操作成功");
				if(isbool){
					location.replace(location.href);
				}else{
					location.replace(location.href);
					parent.Hui_admin_tab($(".Hui-aside a[data-title=查凭证]", parent.document));
				}
			} else {
				alert(result);
			}
		},"json");
	}
	
	function getMaxPzh(thiss){
		if($(thiss).val()!=""){
			$.post("${ctx}/pingZheng/getMaxPzh", {
				pzDate:$(thiss).val()
			}, function(result) {
				$("#vouchersNumber").val(result);
			},"json");
		}
	}
</script>
</head>
<body>
	<div class="viewVcloud-main-body container vc">
		<div id="mainbodyVouchers" class="page-wrap">
			<form id="vouchersForm" class="form-inline">
				<div class="titlebread" style="height: 56px;">
					<div class="pull-right">
						<button id="saveAndNewVoucher2" type="button" class="bluetbn-btn small-btn">保存并添加</button>
						<button type="button" class="lightblue-btn small-btn saveVoucher2">保存</button>
						<button id="printVoucher2" type="button" class="lightblue-btn small-btn" style="display: none;">打印</button>
						<span class="lightblue-btn small-btn glyphicon glyphicon-retweet togglebtn isNotAdd" style="top: 0px; display: none;"></span>
					</div>
					<div class="voucher_tit">
						<h1>记账凭证</h1>
						<span class="vch_year_month" style="display: none;">xxxx-xx</span> <span></span>
					</div>
					<div class="forV">
						<span class="serialNum"> <span>凭证字</span> <input readonly="" class="form-control serPrefix" value="记" id="pzz" style="width: 58px;"> <input id="vouchersNumber" type="text" class="form-control serSuffix" readonly="readonly" style="width: 58px;background-color: #eee;">
							<span>号</span>
						</span> <label for="voucherDate" style="margin-left: 20px;">日期 ：</label>
						<div class="input-group input-append date form_datetime_v">
							<input class="form-control datetime-bg width-100 date_txt" value="${zqTime }" onfocus="WdatePicker({minDate:'${zqTime }',maxDate:'${maxTime }',dateFmt:'yyyy-MM-dd'})" readonly="readonly" onblur="getMaxPzh(this)" id="voucherDate">
						</div>
					</div>
					<div id="tag"></div>
				</div>
				<div class="form" style="margin-left: -30px;">
					<table class="table table-striped v-table" id="voucherTable">
						<colgroup>
							<col width="30">
							<col width="">
							<col width="349">
							<col width="219">
							<col width="219">
						</colgroup>
						<thead>
							<tr>
								<th class="table-edge"></th>
								<th style="vertical-align: middle;">
									<strong>摘要</strong>
								</th>
								<th style="vertical-align: middle;">
									<strong>会计科目</strong>
								</th>
								<th style="vertical-align: middle;">
									<strong>借方金额</strong>
									<div class="money_unit">
										<span>亿</span> <span>千</span> <span>百</span> <span>十</span> <span>万</span> <span>千</span> <span>百</span> <span>十</span> <span>元</span> <span>角</span> <span class="last">分</span>
									</div>
								</th>
								<th>
									<strong>贷方金额</strong>
									<div class="money_unit">
										<span>亿</span> <span>千</span> <span>百</span> <span>十</span> <span>万</span> <span>千</span> <span>百</span> <span>十</span> <span>元</span> <span>角</span> <span class="last">分</span>
									</div>
								</th>
							</tr>
						</thead>
						<tbody>
							<tr data-id="1" class="voucher-tr">
								<td class="table-edge" align="center"></td>
								<td data-type="brief"></td>
								<td data-type="km" kmCode="" kmName=""></td>
								<td data-type="money" class="v-money"></td>
								<td data-type="money" class="v-money v-money2"></td>
							</tr>
							<tr data-id="2" class="voucher-tr">
								<td class="table-edge" align="center"></td>
								<td data-type="brief"></td>
								<td data-type="km" kmCode="" kmName=""></td>
								<td data-type="money" class="v-money"></td>
								<td data-type="money" class="v-money v-money2"></td>
							</tr>
							<tr data-id="3" class="voucher-tr">
								<td class="table-edge" align="center"></td>
								<td data-type="brief"></td>
								<td data-type="km" kmCode="" kmName=""></td>
								<td data-type="money" class="v-money"></td>
								<td data-type="money" class="v-money v-money2"></td>
							</tr>
							<tr data-id="4" class="voucher-tr">
								<td class="table-edge" align="center"></td>
								<td data-type="brief"></td>
								<td data-type="km" kmCode="" kmName=""></td>
								<td data-type="money" class="v-money"></td>
								<td data-type="money" class="v-money v-money2"></td>
							</tr>
							<tr data-id="5" class="voucher-tr">
								<td class="table-edge" align="center"></td>
								<td data-type="brief"></td>
								<td data-type="km" kmCode="" kmName=""></td>
								<td data-type="money" class="v-money"></td>
								<td data-type="money" class="v-money v-money2"></td>
							</tr>
							<tr data-id="6" class="voucher-tr">
								<td class="table-edge" align="center"></td>
								<td data-type="brief"></td>
								<td data-type="km" kmCode="" kmName=""></td>
								<td data-type="money" class="v-money"></td>
								<td data-type="money" class="v-money v-money2"></td>
							</tr>
						</tbody>
						<tfoot>
							<tr>
								<td class="table-edge"></td>
								<td colspan="2" class="heji" style="vertical-align: middle;">
									<strong id="hja">&nbsp;&nbsp;合计：<span id="hejizw"></span></strong>
								</td>
								<td class="v-money"></td>
								<td class="v-money"></td>
							</tr>
						</tfoot>
					</table>
				</div>
			</form>
		</div>
		<!-- 凭证页面 -->
		<div class="div-ui"></div>
	</div>
</body>
</html>